<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.3/vue.min.js"
    integrity="sha512-cH1Ej4JIqdLIap1BvDncAbRCkbl+63RW1hZqoeDjK1MfQtCHYXBkVgBoaHuvZjZRzMdtfjnsaRmzzucdmfL8zg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <title>Document</title>
  <script src="../../font/iconfont.js"></script>
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>

</head>
<!-- 通过这样的一个手法,来让我的代码变可以很react的方式一样,进行这样的操作 -->

<body>
  <div id="app">
    {{name}}
    <Heading level="1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-car"></use>
      </svg>
      123
    </Heading>
    <Heading level="2" icon="car">
      我可以自动添加图标
    </Heading>
  </div>
  <script>
    Vue.component('heading', {
      props: {
        level: {
          type: String,
          required: true
        },
        title: {
          type: String,
          required: true
        },
        icon: String
      },
      render(h) {
        let children = []
        if (this.icon) {
          children.push(h('svg', { class: 'icon' }, [h('use', { attrs: { 'xlink:href': '#icon-' + this.icon } })]))
        }
        children = children.concat(this.$slots.default)
        return h(
          "h" + this.level,
          { attrs: { title: this.title } },
          // 这里单纯的会保存 一个很重要的东西, 他是一个文本组件也可以是 
          children
        )
      },
    })
    const app = new Vue({
      el: '#app',
      data() {
        return {
          name: 'xjh'
        }
      }
    })
  </script>
</body>

</html>